<template>
  <view class="container">
    <!-- 客服 -->
    <view class="kefu">
      <image src="../../static/icon/kefu.png" class="img_kefu"></image>
    </view>
    <!-- 用户信息 -->
    <view class="user">
      <view class="detail">
        <image :src="user.avatar" class="avatar"></image>
        <view class="info">
          <view class="name">{{user.name}}</view>
          <view>平台号：{{user.number}}</view>
          <view>地&nbsp;&nbsp;&nbsp;区：{{user.province}} {{user.city}}</view>
        </view>
      </view>
      <image src="../../static/icon/right.png" class="right"></image>
    </view>
    <!-- 用户金额 -->
    <view class="usermoney">
      <view class="umone">
        总金额(元)<image src="../../static/message/cuo.png" style="width: 32rpx;height: 22rpx;margin-left: 10rpx;" mode="">
        </image>
      </view>
      <view class="umtwo">
        {{money.money}}
        <image src="../../static/message/cuo.png" mode=""
          style="width: 12rpx;height: 24rpx;padding-bottom: 13rpx;padding-left:20rpx ;">
        </image>
      </view>
      <view class="umthree">
        <image src="../../static/message/cuo.png" mode="" style="width: 32rpx;height: 36rpx;padding-top: 20rpx;">
          km </image>
        安全保障 稳定收益 共同富裕
      </view>
    </view>
    <!-- 订单 -->
    <view class="order">
      <view class="ord-one">
        <image src="../../static/icon/help.png" class="ord-icon"></image>
        <view>帮忙订单</view>
      </view>
      <view class="ord-one">
        <view>
          <image src="../../static/icon/resort.png" class="ord-icon"></image>
        </view>
        <view>求助订单</view>
      </view>
      <view class="ord-one">
        <view>
          <image src="../../static/icon/help.png" class="ord-icon"></image>
        </view>
        <view>帮忙订单</view>
      </view>
      <view class="ord-one">
        <view>
          <image src="../../static/icon/help.png" class="ord-icon"></image>
        </view>
        <view>帮忙订单</view>
      </view>
    </view>
    <!-- 底部菜单 -->
    <view class="list_menu">
      <view class="column">
        <view class="left">
          <image src="../../static/icon/gongxu.png" class="icon"></image>
          <view class="list_name">供需历程</view>
        </view>
        <view>
          <image src="../../static/icon/right.png" class="right"></image>
        </view>
      </view>
      <view class="column">
        <view class="left">
          <image src="../../static/icon/rank.png" class="icon"></image>
          <view class="list_name">排行榜</view>
        </view>
        <view>
          <image src="../../static/icon/right.png" class="right"></image>
        </view>
      </view>
      <view class="column">
        <view class="left">
          <image src="../../static/icon/group.png" class="icon"></image>
          <view class="list_name">社群</view>
        </view>
        <view>
          <image src="../../static/icon/right.png" class="right"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        href: 'https://uniapp.dcloud.io/component/README?id=uniui',
        user: {
          'avatar': '../../static/icon/avatar.png',
          'name': '隔壁王二傻',
          'number': 'A00001',
          'province': '河南',
          'city': '郑州'
        },
        money: {
          'money': '10.45'
        }
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #FFFFFF;

    .kefu {
      display: flex;
      justify-content: flex-end;
      margin-right: 40rpx;

      .img_kefu {
        width: 54rpx;
        height: 54rpx;
      }
    }

    /* 个人信息模块 */
    .user {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 6rpx solid #F5F5F5;
      padding-bottom: 40rpx;
      margin: 0 40rpx;

      //	信息详情
      .detail {
        display: flex;
        font-size: 34rpx;
        color: rgb(100, 100, 100);

        .avatar {
          height: 140rpx;
          width: 140rpx;
        }

        .info {
          margin-left: 2vh;
          display: flex;
          flex-direction: column;
          line-height: 50rpx;

          .name {
            color: rgb(51, 51, 51);
            font-weight: bold;
            font-size: 40rpx;
          }
        }
      }

    }

    // 用户金额
    .usermoney {
      width: 100vw;
      height: 640rpx;
      border-bottom: 6rpx solid #F5F5F5;
      text-align: center;
      box-sizing: border-box;

      .umone {
        padding-top: 32rpx;
        padding-bottom: 44rpx;
        color: #B9B9B9;
      }

      .umtwo {
        font-size: 64rpx;
        font-weight: bold;
        padding-bottom: 44rpx;
      }

      .umthree {
        margin: auto;
        width: 460rpx;
        height: 60rpx;
        background-color: #FFEEEF;
      }
    }

    /* 订单 */
    .order {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 160rpx;

      .ord-one {
        text-align: center;
      }

      .ord-icon {
        width: 64rpx;
        height: 64rpx;
      }
    }

    /* 底部菜单 */
    .list_menu {
      width: 100%;

      .column {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70rpx;

        .left {
          height: 70rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .icon {
            height: 48rpx;
            width: 48rpx;
          }

          .list_name {
            text-align: left;
            margin-left: 2vw;
            font-size: 26rpx;
            font-weight: 400;
          }
        }
      }
    }

    // 右图标
    .right {
      height: 28rpx;
      width: 28rpx;
    }
  }
</style>